<template>
    <div>
        <Breadcrumb></Breadcrumb>
        <div class="el-row">
          
            <div class="el-col el-col-8">
                <el-form label-width="100px">
                    <el-form-item label="套餐名称：">
                        <el-input v-model="meal.name"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐月数：">
                        <el-input v-model="meal.mouth"></el-input>
                    </el-form-item>
                    <el-form-item label="正常价：">
                        <el-input v-model="meal.normalPrice"></el-input>
                    </el-form-item>
                     <el-form-item label="促销价：">
                        <el-input v-model="meal.salePrice"></el-input>
                    </el-form-item>
                    <el-form-item label="是否推荐：">
                        <el-radio-group v-model="meal.type">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="updateMeal">确认修改</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import Breadcrumb from '../../views/nav/Breadcrumb.vue'
import { createNamespacedHelpers} from 'vuex'
const {mapActions, mapState} = createNamespacedHelpers('meals');
export default {
    components: {
        Breadcrumb
    },
    data() {
        return {
            meal:[]
        };
    },
    created() {
        this.getUpdateMealData();
    },
    computed: {
        ...mapState(['rows']),
    },
    methods: {
        ...mapActions(['getOneDataAsync', 'updateOneDataAsync']),
        // 获取修改套餐
        getUpdateMealData() {
           const res = this.rows.filter(item => item._id == this.$route.params._id);
           console.log(res);
           this.meal = res[0] || []
        },
        // 修改套餐
        async updateMeal() {
            const {data} = await this.updateOneDataAsync({...this.meal, _id: this.$route.params._id});
            if(data.meta.status == 200) {
                this.$message({
                    message: "恭喜你，修改套餐成功",
                    type: "success",
                });
                this.$router.push('/mealList')
            }else {
                this.$message.error("抱歉，修改套餐失败");
                console.log(data);
            }
        },
    },
};
</script>

<style scoped>
.el-breadcrumb {
    padding-bottom: 20px;
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}
.el-select {
    width: 100%;
}
</style>